/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import { NewAppScreen } from '@react-native/new-app-screen';
import { StatusBar, StyleSheet, useColorScheme, View } from 'react-native';
import {
  SafeAreaProvider,
  useSafeAreaInsets,
} from 'react-native-safe-area-context';
import { Text, Image } from 'react-native';

function App() {
  return (
    <>
      <StatusBar
        translucent
        backgroundColor="transparent"
        barStyle="dark-content"
      />
      <View style={{
        paddingTop: 20,
        flex: 1,
        alignItems: "stretch"
      }}>
        <View style={{
          flex: 28,
          backgroundColor: 'rgba(192, 186, 192, 1)',
        }}>
          <IndexContent></IndexContent>
        </View>
        <View style={{
          flex: 2,
          backgroundColor: 'rgba(216, 210, 216, 1)',

        }}>
          <MeNavigationBar></MeNavigationBar>
        </View>
      </View>
    </>

  );
}


function YiMinHome() {
  return (
    <View style={{ flex: 5 }}>
      <Text>h1</Text>
    </View>

  )
}


/**
 * 我自己的导航栏
 */
function MeNavigationBar() {
  return (
    <View style={{
      flex: 1,
      flexDirection: 'row',
      justifyContent: "space-around",
      alignItems: "center",
      borderColor: '#727171ff',
      borderStyle: 'solid',
      borderTopWidth: 1
    }}>

      <View style={{
         alignItems: 'center'
      }}>
        <View style={{
          width: 30,
          height: 30,
          backgroundColor: 'rgba(215, 132, 24, 1)',
          borderRadius: 15,

        }}></View>
        <Text>主页</Text>
      </View>

      <View style={{
         alignItems: 'center'
      }}>

        <View style={{
          width: 30,
          height: 30,
          backgroundColor: 'rgba(234, 234, 241, 1)',
          borderRadius: 15,
        }}>
        </View>
        <Text>通知</Text>
      </View>


      <View style={{
        alignItems: 'center'
      }}>
        <View style={{
          width: 30,
          height: 30,
          backgroundColor: 'rgba(227, 26, 207, 1)',
          borderRadius: 15,
        }}></View>


        <Text
         
        >您</Text>
      </View>


    </View>
  )
}


/**
 * 这是主页显示内容
 * 
 */
function IndexContent() {


  return (
    <View style={{
      flex: 1,
      flexDirection: "row",

    }}>

      <View style={{
        flex: 1,
        backgroundColor: 'rgba(192, 186, 192, 1)',
        paddingTop: 20,
        alignItems: "center", //这是次轴对齐方式,
        gap: 15
      }}>


        <View>
          <View style={{
            backgroundColor: 'rgba(64, 40, 218, 1)',
            borderRadius: 15,
            width: 50,
            height: 50,
          }}>

          </View>
        </View>

        <Text>_______</Text>


        <View>
          <View style={{
            backgroundColor: 'rgba(218, 160, 14, 1)',
            borderRadius: 50,
            width: 50,
            height: 50,

          }}>

          </View>
        </View>
        <View>
          <View style={{
            backgroundColor: 'rgba(218, 160, 14, 1)',
            borderRadius: 50,
            width: 50,
            height: 50,

          }}>

          </View>
        </View>
        <View>
          <View style={{
            backgroundColor: 'rgba(218, 160, 14, 1)',
            borderRadius: 50,
            width: 50,
            height: 50
          }}>

          </View>
        </View>


      </View>

      <View style={{
        flex: 5,
        backgroundColor: 'rgba(234, 234, 241, 1)',
        borderTopLeftRadius: 35,
        paddingTop: 20,
        paddingLeft: 20
      }}>

        <Text>消息</Text>

      </View>

    </View>
  )
}



const styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
  }
});


function iconS() {



}


export default App;
